<!-- 个人信息 -->
<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view>
		<view class="mask" @tap="goHome">
			<view class="zhuti">
				<uni-icons type="contact-filled" color="#fff" size="60"></uni-icons>
				<view :style="{ color: '#fff', fontSize: '20px', marginBottom: '40rpx' }">{{ cardArrList.customerCode ? cardArrList.customerCode : 'บัญชีของฉัน' }}</view>
				<view class="shouji">
					<view>{{ this.$t('city.ctwfont2') }}:</view>
					<view>{{ cardArrList.phone1 }}</view>
				</view>
				<view class="shouji">
					<view>{{ this.$t('modifyMail.ctwfont6') }}:</view>
					<view>{{ cardArrList.email }}</view>
				</view>
				<button class="btnBox" type="default" style="margin-top: 40rpx;" @tap="goDizi">
					<view>{{ this.$t('modifyMail.ctwfont7') }}</view>
					<view><uni-icons type="forward" color="#fff" size="16"></uni-icons></view>
				</button>
				<button class="btnBox" type="default" @tap="gaiMM">
					<view>{{ this.$t('modifyMail.ctwfont19') }}</view>
					<view><uni-icons type="forward" color="#fff" size="16"></uni-icons></view>
				</button>

				<view class="shouji" style="margin-top: 60rpx;" @tap="out">
					<image style="width: 16px; height: 16px; margin-right: 5px; " mode="scaleToFill" src="/static/icon/superAnt/Fill2@2x.png"></image>
					<view>{{ this.$t('modifyMail.ctwfont20') }}</view>
				</view>
			</view>
		</view>

		<!-- 退出 -->
		<sign-out ref="signOutBox" />
	</view>
</template>

<script>
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import { getStorage } from '@/utils/setStorage.js';
import { codeMapFun } from '@/utils/codeMap.js';
import baseFont from '@/utils/baseFont.js';
export default {
	extends: baseFont,
	data: function() {
		return {
			back_k: 0,
			signOutShow: false, // 退出登录
			cardArrList: ''
		};
	},
	onShow() {
		this.getList();
	},
	onLoad() {
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.topBarHeight = res.statusBarHeight;
			}
		});
	},
	onHide() {
		this.$refs.signOutBox.close();
	},
	components: { signOut },
	methods: {
		// 返回home
		goHome() {
			const pages = getCurrentPages();
			if (pages.length === 1) {
				// #ifdef APP-PLUS
				uni.redirectTo({
					url: '/pages/home/index'
				});
				// #endif
				// #ifdef H5
				this.$Router.push('/pages/home/index');
				// #endif
			} else {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		goBackBox() {
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			this.back_k < 0 ? (this.back_k = 0) : (this.back_k = this.back_k);
			if (data) {
				let main = plus.android.runtimeMainActivity();
				if (this.back_k > 0) {
					this.back_k = 0;
					return main.moveTaskToBack(false);
					// return plus.runtime.quit();
				} else {
					const pages = getCurrentPages();
					if (pages.length === 1) {
						this.back_k++;
						setTimeout(() => {
							this.back_k--;
						}, 1000);
					} else {
						uni.navigateBack({
							delta: 1
						});
					}
				}
			}
		},
		out() {
			// uni.navigateBack({
			// 	delta: 1
			// });
			this.$refs.signOutBox.open();
		},
		// 地址
		goDizi() {
			uni.redirectTo({
				url: '/pages/me/modifyName'
			});
		},
		gaiMM() {
			uni.redirectTo({
				url: '/pages/logins/modifyMMTwo'
			});
		},
		// 获取数据
		async getList() {
			const user = JSON.parse(getStorage('userconter'));
			const params = {
				customerCode: user.customerCode
			};
			const { data: res } = await this.$http(true, 'api/E3/customerInfo', params, 'GET');
			if (res.errno === 0) {
				this.cardArrList = res.data;
			} else {
				const err = codeMapFun().find(item => item[res.errno]);
				if (err) {
					uni.showToast({
						title: err[res.errno],
						icon: 'none',
						position: 'top'
					});
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none',
						position: 'top'
					});
				}
			}
		}
	}
};
</script>
<style>
page {
	background: transparent;
}
</style>
<style lang="scss" scoped>
.mask {
	position: fixed;
	// width: 100%;
	// height: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(5rpx);
	.zhuti {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.shouji {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 16px;
		}

		.btnBox {
			background-color: #cd001b;
			border: 2px solid #fff;
			border-radius: 20px;
			width: 430rpx;
			font-size: 16px;
			color: #fff;
			text-align: left;
			margin: 5px 0;
			display: flex;
			justify-content: space-between;
		}
	}
}
</style>
